<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案例</text>
         <text class="uv-block__title">苹果、香蕉和橙子哪个最甜？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__radio-item">
               <uv-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
                  <uv-radio
                     v-for="(item, index) in radiolist1"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                     @change="radioChange"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义形状</text>
         <text class="uv-block__title">王者荣耀谁最帅？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__radio-item">
               <uv-radio-group v-model="radiovalue2" placement="column" shape="circle">
                  <uv-radio
                     v-for="(item, index) in radiolist2"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否禁用</text>
         <text class="uv-block__title">苹果、香蕉和菠萝哪个最甜？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__radio-item">
               <uv-radio-group v-model="radiovalue3" placement="column">
                  <uv-radio
                     v-for="(item, index) in radiolist3"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                     :disabled="!index"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">纵向排列</text>
         <text class="uv-block__title">狙击枪用哪个倍镜最好？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__radio-item">
               <uv-radio-group v-model="radiovalue4" placement="column" :labelDisabled="true">
                  <uv-radio
                     v-for="(item, index) in radiolist4"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义颜色？</text>
         <text class="uv-block__title">你比较喜欢下面哪个颜色？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__radio-item">
               <uv-radio-group v-model="radiovalue5" placement="column" shape="card">
                  <uv-radio
                     v-for="(item, index) in radiolist5"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                     :activeColor="item.color"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横向排列形式？</text>
         <text class="uv-block__title">王者荣耀哪个英雄最美？</text>
         <view class="uv-demo-block__content">
            <view class="uv-page__radio-item">
               <uv-radio-group
                  v-model="radiovalue6"
                  placement="row"
                  :customStyle="{ margin: '0 -8px' }"
               >
                  <uv-radio
                     v-for="(item, index) in radiolist6"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横向两端排列形式？</text>
         <text class="uv-block__title">你觉得阿木木可爱吗？</text>
         <view>
            <view class="uv-page__radio-item">
               <uv-radio-group
                  v-model="radiovalue7"
                  :borderBottom="true"
                  placement="column"
                  iconPlacement="right"
               >
                  <uv-radio
                     v-for="(item, index) in radiolist7"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                  >
                  </uv-radio>
               </uv-radio-group>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const radiolist1 = ref([
   {
      name: '苹果',
      disabled: false,
   },
   {
      name: '香蕉',
      disabled: false,
   },
   {
      name: '橙子',
      disabled: false,
   },
   {
      name: '榴莲',
      disabled: false,
   },
]);
const radiovalue1 = ref('苹果');
const radiolist2 = ref([
   {
      name: '李白',
      disabled: false,
   },
   {
      name: '韩信',
      disabled: false,
   },
   {
      name: '马可波罗',
      disabled: false,
   },
   {
      name: '百里守约',
      disabled: false,
   },
]);
const radiovalue2 = ref('李白');
const radiolist3 = ref([
   {
      name: '苹果',
      disabled: false,
   },
   {
      name: '香蕉',
      disabled: false,
   },
   {
      name: '菠萝',
      disabled: false,
   },
]);
const radiovalue3 = ref('苹果');
const radiolist4 = ref([
   {
      name: '3倍镜',
      disabled: false,
   },
   {
      name: '4倍镜',
      disabled: false,
   },
   {
      name: '6倍镜',
      disabled: false,
   },
   {
      name: '8倍镜',
      disabled: false,
   },
]);
const radiovalue4 = ref('6倍镜');
const radiolist5 = ref([
   {
      name: '红色',
      disabled: true,
      color: '#f56c6c',
   },
   {
      name: '黄色',
      disabled: false,
      color: '#f9ae3d',
   },
   {
      name: '绿色',
      disabled: false,
      color: '#5ac725',
   },
   {
      name: '蓝色',
      disabled: false,
      color: '#3c9cff',
   },
]);
const radiovalue5 = ref('绿色');
const radiolist6 = ref([
   {
      name: '妲己',
      disabled: false,
   },
   {
      name: '虞姬',
      disabled: false,
   },
   {
      name: '不知火舞',
      disabled: false,
   },
   {
      name: '李元芳',
      disabled: false,
   },
   {
      name: '典韦',
      disabled: false,
   },
   {
      name: '黄忠',
      disabled: false,
   },
]);
const radiovalue6 = ref('妲己');
const radiolist7 = ref([
   {
      name: '可爱',
      disabled: false,
   },
   {
      name: '一般',
      disabled: false,
   },
   {
      name: '不可爱',
      disabled: false,
   },
]);
const radiovalue7 = ref('可爱');

const groupChange = (e: string) => {
   console.log(e, 'groupChange');
};
const radioChange = (e: string) => {
   console.log(e, 'radioChange');
};
</script>

<style lang="scss" scoped></style>
